5.2 jQuery

  1. What is jQuery?
    • jQuery is the most popular JavaScript library that is used to make it easier to use JavaScript and CSS. Read all in Comparison of JavaScript frameworks.
    • The jQuery library contains HTML/DOM manipulation, CSS manipulation, AJAX, and utilities. Many web sites use jQuery.
    • Read "What is jQuery" and "Why jQuery" in jQuery Introduction.
    • Try an example Click and Disappear. Isn't the code so simple?
    • Can you understand the above code? What is '$(...)'?
    • Isn't the above example an event listener? Any idea how to implement?

  2. What can we do with jQuery? What features are included in jQuery?
    • HTML/DOM manipulation: meaning?
    • CSS manipulation
    • HTML event methods
    • Effects and animations
    • AJAX - to be discussed in the next section
    • Utilities

  3. How to use jQuery?
    1. First, read "Adding jQuery to Your Web Pages", "Downloading jQuery", and "jQuery CDN" in jQuery Get Started.
    2. Second, with jQuery you select (or query) HTML elements [based on an event] and perform actions on them or other selected elements.
      • Example 1.
        $(document).ready(function() {  // What is 'document'? What is '$(...)'? What is 'ready(...)'? What is 'function() {...}'?
            $(selector).action();  // Do this action over selected objects
        });
        
      • Example 2.
        $(document).ready(function() {
            $(selector).event(function() {  // When this event is triggered
                $(selector).action();       //   do this action over selected objects
                $(this).action();           // What is 'this'? The current HTML DOM element or $(selector)?
            });
        });
        // or
        $(function() {  // Nothig different from the above example. Can you imagin how $ works?
            $(selector).on(eventname, function() {
                $(selector).action();
                $(this).action();           // What is 'this'? The current HTML DOM element or $(selector)?
            });
        });
        
      • Read "jQuery Syntax" and "The Document Ready Event" in jQuery Syntax

  4. What to select? How to select?
    • In general, there are three types of selectors. Do you remember the selectors in CSS?
      • The element selector - mutiple elements - E.g., $('p')
      • The #id selector - only one element - E.g., $('#test'), $('p#test')
      • The .class selector - multiple elements - E.g., $('.testclass'), $('p.testclass')
      • The current HTML element - $(this)
      • Elements with an attribute - E.g., $("div[data-target]"), $("input[name='property']:checked")
      • ...
    • Trial 1: Let's try a simple jQuery example. When a <p> of id='tr1' is clicked, let's show alert(). What will happen when <button> is clicked?


    • Read all in jQuery Selectors and try all the examples and exercises. Try jQuery Selector Tester.
    • How about CSS select combinators, such as siblings, next sibling, descendants, children, lists?
    • Trial 2: Let's try another jQuery example. When a button of id='tr2' is clicked, let's hide only the <div> belonging to .tr2-target.


    • How to select one of multiple selected elements? (Multiple DOM objects can be simply selected without events.)
      • Read ""data()", each()", "get()", "index()", "toArray()" in jQuery Miscellaneous Methods.
      • In the examples, alert($(this).text());? alert($(this).innerHTML);?
      • How to get a DOM object specified by the selector?
    • How to know how many elements are selected?
      alert($('dev').length);
    • How to put your jQuery function in a separate file?

  5. What kind of jQuery events?
    • jQuery is tailor-made to respond to events in an HTML page. jQuery events are very similar to HTML. Generally you can use ...
      • Mouse events
      • Keyboard events
      • Form events
      • document and window events
    • Read all in jQuery Event Methods.
    • Some questions
      • What is the data type of the argument passed to on() in the last example?
      • What is a callback function?
    • Trial 3: Let's change the background color, when the mouse moves over <p> in .tr3, like :hover in CSS.



  6. jQuery features - Let's see what we can do with jQuery.
    • jQuery Effects: Hide, Show, Toggle, Slide, Fade, and Animate
    • jQuery HTML and CSS: How to create, remove, change, get?
      • HTML
      • CSS
      • Example: nested ordered list; e.g., 2.1, 2.2, ...; what methods should be used?; read the code carefully.
        1. COMP 2680
        2. COMP 3540
        3. COMP 4620
        1. Excellent
        2. Fantastic
        3. Amazing
        4. Wonderful
      • Here is the code of the above nested ordered list, 2.1, 2.2, 2.3, ...
        <ol id='testNestedOl'>
            <li>COMP 2680</li>
            <li>COMP 3540</li>
            <li>COMP 4620</li>
        </ol>
        <script>
            $('???').css('list-style-type', 'none');  // To remove ordering numbers
            
            $('#testNestedOl > ???').???('display', '???');  // In order to make <li> be displayed in the same line
            $('#testNestedOl > li').???(function() {  // For each of them
                $(this).???('2.' + (Number($(this).???()) + 1) + '  ');  // Before each <li>, using .before()
                $(this).html($(this).html() + '<br>');  // Include a line break at the end of the list.
            });
            /* or
            $('#testNestedOl > li').???(function() {  // For each of them
                $(this).???('2.' + (Number($(this).???()) + 1) + '  ');  // Before each <li>, using .prepend()
            });
            */
            
            $('#testNestedOl > li:???').hover(function() {  // even or odd
                $(this).css('background-color', 'Grey');
            }, function() {
                $(this).css('background-color', 'transparent');  // or 'inherit'?
            });
        </script>
        
      • Trial 4: Let's try the above example with different id='tr4'.



    • jQuery Traversing: How to get parents, children, siblings?
    • jQuery AJAX: How to send/receive data asynchronously? We will discuss this topic in the section 5.5.
    • jQuery Misc
  7. Some other interesting examples.
  8. Can you design and implement a similar but simple library?
  9. Some review questions and learning outcomes
    • How to obtain/change CSS property values
    • How to obtain/change HTML contents
    • How to obtain/chage input values
    • How to hide/show an HTML element when a button is clicked
    • How to send a form when a button is clicked
      • Trial 5: Let's submit a form when a button is clicked.


    • How to obtain all the checked checkboxes; How to obtain all the selected options
    • When an object is selected, how to trigger an event on another object
    • Know the general pattern how to use jQuery.
    • List the three general types of selectors
    • Use jQeury for event handling, better effects, and manipulation of CSS, HTML, and AJAX.